<template>
    <div id="body">

        <!--        顶部导航栏-->
        <div class="navBar">

            <div class="navBar-border">

                <div class="navBar-inner">

                    <!--                    图标-->
                    <div class="navBar-icon" @click="goToBookHome">
                        <img src="/images/icon01.png" alt="">
                    </div>

                    <div>
                        <input placeholder="搜索" type="text" class="navBar-input">
                    </div>

                    <button class="navBar-home" @click="goToBookHome">
                        首页
                    </button>

                    <span class="navBar-separator">
                    </span>

                    <button class="navBar-link">
                        传书到手机
                    </button>

                    <span class="navBar-separator">
                    </span>

                    <button class="navBar-link">
                        墨水屏版本
                    </button>

                    <span class="navBar-separator">
                    </span>

                    <button class="navBar-link">
                        手机版
                    </button>

                    <span class="navBar-separator">
                    </span>

                    <div style="position: relative;">
                        <div class="navBar-avatar">
                            <img src="/images/96.jfif"
                                 alt="" style="border-radius: 50%;
    vertical-align: top;">
                        </div>
                    </div>

                </div>

            </div>
        </div>

        <div class="content">

            <!-- 新增书籍和查询表单 -->
            <div class="action-bar">
                <!-- 查询表单 -->
                <el-form :inline="true" class="search-form">
                    <el-form-item label="书名" size="mini">
                        <el-input placeholder="请输入书名"></el-input>
                    </el-form-item>

                    <el-form-item label="作者" size="mini">
                        <el-input placeholder="请输入作者"></el-input>
                    </el-form-item>

                    <el-form-item class="action-buttons">
                        <el-button type="primary" size="mini" icon="el-icon-search" @click="onSubmit">查询</el-button>
                        <el-button size="mini" type="success" @click="add" icon="el-icon-circle-plus-outline" plain>新增
                        </el-button>
                    </el-form-item>
                </el-form>

            </div>


            <!-- 表格展示书架内容 -->
            <el-table :data="tableData" style="width: 100%" stripe border size="mini">
                <el-table-column type="index" label="序号" align="center" width="60"/>
                <el-table-column label="书名" prop="title" :show-overflow-tooltip="true" align="center"
                                 width="200px"></el-table-column>
                <el-table-column label="作者" prop="author" :show-overflow-tooltip="true" align="center"
                                 width="200px"></el-table-column>
                <el-table-column label="封面" prop="cover" :show-overflow-tooltip="true" align="center" width="100">
                    <template slot-scope="scope">
                        <!--                        <img :src="scope.row.cover" alt="封面" class="cover-img"/>-->
                        <el-image
                                style="width: 30px; height: 40px; cursor: pointer;"
                                :src="scope.row.cover"
                                :preview-src-list="[scope.row.cover]"
                                fit="cover">
                        </el-image>
                    </template>
                </el-table-column>

                <!--                <el-table-column label="简介" prop="detail" :show-overflow-tooltip="true" align="center"-->
                <!--                ></el-table-column>-->

                <el-table-column label="简介" prop="detail" align="center">
                    <template slot-scope="scope">
        <span
                class="detail-text"
                @click="showDetailDialog(scope.row.detail)"
        >
            {{  scope.row.detail }}
        </span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" align="center" fixed="right" width="200px">
                    <!--          fixed="right"-->
                    <template slot-scope="scope">
                        <el-button
                                type="primary"
                                size="mini"
                                @click="handleEdit(scope.row.id)"
                        >编辑
                        </el-button>

                        <el-button
                                type="danger"
                                size="mini"
                                @click="handleDelete(scope.row.id)"
                        >移出书架
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>

            <!--            书籍简介详情-->
            <el-dialog
                    title="书籍简介"
                    :visible.sync="detailDialogVisible"
                    width="50%"
            >
                <p>{{ detailContent }}</p>
            </el-dialog>

            <!-- 新增弹出框 -->
            <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="open" append-to-body center
                       :before-close="openAdd" width="610px" top="5vh">

                <el-form :label-position="labelPosition" label-width="130px"
                         ref="formAdd"
                         size="mini"
                         class="demo-dynamic" style="margin-top: -20px">
                    <el-form-item label="书名" prop="title">
                        <el-input placeholder="请输入" clearable style="width: 400px"></el-input>
                    </el-form-item>

                    <el-form-item label="作者" prop="author">
                        <el-input placeholder="请输入" clearable style="width: 400px"></el-input>
                    </el-form-item>

                    <el-form-item label="简介" prop="detail">
                        <el-input placeholder="请输入" clearable style="width: 400px"></el-input>
                    </el-form-item>

                </el-form>

                <div style="padding-top:10px;display: flex;justify-content: center;gap: 60px;">
                    <el-button @click="openAdd" size="small" icon="el-icon-close">关闭</el-button>
                    <el-popconfirm title="确认好了吗？" @onConfirm="addSubmit('formAdd')">
                        <el-button slot="reference" type="primary" size="small" :disabled="submitDis"
                                   icon="el-icon-check">确 定
                        </el-button>
                    </el-popconfirm>
                </div>
            </el-dialog>

        </div>


    </div>
</template>

<script>
    import axios from 'axios';

    export default {
        name: 'shelfManagement',
        data() {
            return {
                submitDis: false,
                title: "",
                labelPosition: 'right',
                labelWidth: '100px',
                shelfBooks: [], // 书架书籍列表
                tableData: [],

                hover: false,  // 控制鼠标是否移入
                detailDialogVisible: false,  // 控制对话框显示
                detailContent: '',  // 存储点击查看的简介内容

                open: false,
                openEdit: false,
            };
        },
        mounted() {
            this.onSubmit(); // 查询
        },
        methods: {

            // 跳转主页
            goToBookHome() {
                this.$router.push('/');
            },

            // 获取书架数据
            onSubmit() {
                axios
                    .get('/api/shelf-books')
                    .then((response) => {
                        if (response.data.code === 200) {
                            this.tableData = response.data.data;
                            console.log(this.tableData)
                        }
                    })
                    .catch((error) => {
                        console.error('获取书架数据失败:', error);
                    });
            },

            // 点击查看完整简介
            showDetailDialog(content) {
                this.detailContent = content;
                this.detailDialogVisible = true;
            },

            // 新增弹出框
            add() {
                // 显示新增对话框
                this.open = true;
                this.title = '新增数据';
            },

            //新增提交
            addSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.submitDis = true;
                        setTimeout(() => {
                            this.submitDis = false;
                        }, 2000);
                        console.log("新增成功")
                    } else {
                        return false;
                    }
                });
            },

            // 新增表单关闭按钮
            openAdd() {
                this.open = false
                this.$refs.formAdd.resetFields();
            },

            // 编辑
            handleEdit(id) {
                console.log("书籍id", id)
            },

            handleDelete(id) {
                console.log("移出id", id)
            }
        },
    };
</script>

<style scoped>

    #body {
        width: 100%;
        height: auto;
        margin: 0 auto;
        min-width: 1024px;
    }

    .cover-img {
        width: 30px;
        height: 40px;
        /*transition: transform 0.3s ease; !* 添加过渡效果 *!*/
        /*cursor: pointer; !* 鼠标悬停时显示为手形 *!*/
    }

    /*.cover-img:hover {*/
    /*    transform: scale(1.5); !* 鼠标悬停时放大 *!*/
    /*}*/

    /*.el-button {*/
    /*    margin-right: 10px;*/
    /*}*/

    .navBar {
        position: fixed;
        z-index: 80;
        width: 100%;
        height: 72px;
        transition: background-color .2s ease-in-out;
        background-color: #ffffff;
    }

    .navBar-border {
        border-radius: 0;
        border: solid #ebedf1;
        border-width: 0 0 1px;
        height: 100%;
    }

    .navBar-inner {
        max-width: 1120px;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        line-height: 1.5;
    }

    .navBar-icon {
        cursor: pointer;
    }

    .navBar-input {
        color: #c1c8d2;
        margin: 0 20px;
        flex: 1;
        height: 36px;
        padding: 0 36px;
        border-radius: 20px;
        font-size: 14px;
        background-size: 20px 20px;
        background: #f6f7f9 url(https://cdn.weread.qq.com/web/wrwebnjlogic/image/icon_search.5731b0d1.png) no-repeat 12px 8px;
        width: 480px;
        border: 0;

    }

    .navBar-home {
        color: #555a61;
        margin-left: 12px;
        font-size: 16px;
        font-weight: 500;
        opacity: .7;
        text-decoration: none;
    }

    .navBar-home:hover {
        font-weight: 700;
        color: #242e33;
    }

    .navBar-separator {
        background-color: #0d141e;
        display: inline-block;
        width: 1px;
        height: 16px;
        margin-left: 18px;
        opacity: .3;
    }

    .navBar-link {
        margin-left: 12px;
        font-size: 16px;
        font-weight: 500;
        opacity: .7;
        color: #555a61;
    }

    .navBar-link:hover {
        color: #242e33;
        font-weight: 700;
    }

    .navBar-inner button {
        background: none;
        border: 0;
        padding: 0;
        text-decoration: none;
        cursor: pointer;
    }

    .navBar-avatar {
        cursor: pointer !important;
        width: 28px;
        height: 28px;
        margin-left: 18px;
        display: inline-block;
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 50%;
        border: 1px solid rgba(0, 0, 0, .1);
    }

    img {
        height: 100%;
        width: 100%;
    }

    .content {
        min-height: 100%;
        box-sizing: border-box;
        position: relative;
        padding-top: 87px;
        max-width: 1120px;
        margin-left: auto;
        margin-right: auto;
    }

    .action-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .search-form {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .action-buttons {
        display: flex;
        align-items: center; /* 确保按钮在垂直方向上对齐 */
        gap: 10px; /* 设置按钮之间的间隔 */
    }

    /* 控制文本超出时显示省略号 */
    .detail-text {
        /*display: inline-block;*/
        /*max-width: 180px;*/
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .detail-text:hover {
        cursor: pointer;
        color: #409EFF;
    }

</style>
